<template>
<div>
    <!--表格栏-->
    <el-table
      :data="content"
      :highlight-current-row="highlightCurrentRow"
      @selection-change="selectionChange"
      @current-change="handleCurrentChange"
      v-loading="loading"
      :element-loading-text="$t('action.loading')"
      :border="border"
      :stripe="stripe"
      :show-overflow-tooltip="showOverflowTooltip"
      :max-height="maxHeight"
      :size="size"
      :align="align"
      style="width:100%;"
      :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}"
    >
      <el-table-column type="selection" width="50" v-if="showSelection" fixed="left"></el-table-column>
      <el-table-column type="index" width="50" v-if="showIndex"></el-table-column>

      <template v-for="column in columns">
        <el-table-column
          header-align="center"
          align="center"
          :prop="column.prop"
          :label="column.label"
          :width="column.width"
          :min-width="column.minWidth"
          :fixed="column.fixed"
          :key="column.prop"
          :type="column.type"
          :formatter="column.formatter"
        >
          <template slot-scope="scope">
            <template v-if="!column.render">
              <template v-if="column.formatter">
                <div
                  v-html="column.formatter(scope.row, column,scope.row[column.prop],scope.index)"
                ></div>
              </template>
              <template v-else>
                <span>{{scope.row[column.prop]}}</span>
              </template>
            </template>
            <template v-else>
              <expand-dom :column="column" :row="scope.row" :render="column.render"
                          :index="index"></expand-dom>
            </template>
          </template>
        </el-table-column>
      </template>

      <el-table-column
        :label="$t('action.operation')"
        :width="operationWidth"
        fixed="right"
        v-if="showOperation"
        header-align="center"
        align="left"
      >
        <template slot-scope="scope">
          <kt-button
            icon="fa fa-edit"
            :label="$t('action.edit')"
            :show="showEditOperation"
            :perms="permsEdit"
            :size="size"
            @click="handleEdit(scope.$index, scope.row)"
          />
          <kt-button
            icon="fa fa-trash"
            :label="$t('action.delete')"
            :show="showDeleteOperation"
            :perms="permsDelete"
            :size="size"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          />

          <kt-button
            icon="fa fa-trash"
            :label="$t('action.delete')"
            :show="showDeleteParams"
            :perms="permsDelete"
            :size="size"
            type="danger"
            @click="handleDeleteParams(scope.$index, scope.row)"
          />
          <kt-button
            icon="fa fa-search"
            :label="$t('action.detail')"
            :show="showDetailOperation"
            :size="size"
            type="success"
            @click="handleDetail(scope.$index, scope.row)"
          />

          <kt-button
            icon="fa fa-search"
            :label="$t('action.detail')"
            :show="showMockOperation"
            :size="size"
            type="success"
            @click="clinkMock()"
          />
          <kt-button
            :label="customLabel"
            :show="showCustomOperation"
            :size="size"
            type="active"
            @click="handleCustom(scope.$index, scope.row)"
          />

          <kt-button
            :label="auditLabel"
            :show="showAuditOperation"
            :size="size"
            type="success"
            @click="handleAudit(scope.$index, scope.row)"
          />

          <kt-button
            icon="fa fa-copy"
            :label="'复制'"
            :size="size"
            :show="showCopyOperation"
            type="success"
            @click="handleCopy(scope.$index, scope.row)"
          />
          <template >
            <kt-button
              icon="fa fa-copy"
              :label="'发布'"
              :show="showPushOperation"
              :size="size"
              v-if="scope.row.status == 0 || scope.row.status ==2"
              type="success"
              @click="handlePush(scope.$index, scope.row)"
            />

            <kt-button

              label="下架"
              :show="showPushOperations"
              :size="size"
              v-if="scope.row.status == 1"
              type="success"
              @click="handleLower(scope.$index, scope.row)"
            />
           <kt-button
              label="上架"
              :show="groundings"
              :size="size"
              v-if="scope.row.status == 0 || scope.row.status == 2"
              type="success"
              @click="grounding(scope.$index, scope.row)"
            />
            <kt-button
              icon="fa fa-copy"
              :label="'复制链接'"
              :size="size"
              :show="showCopyLink"
              type="success"
              v-if="scope.row.status == 1 && scope.row.pageType == 3"
              v-clipboard:copy="'/pages/marketPage/marketPage?pageId=' + scope.row.id"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
            />
            <kt-button
              :label="'审核'"
              :show="conceal"
              :size="size"
              type="success"
              @click="Auditmethods(scope.$index, scope.row)"
            />
            <kt-button
              :label="'显示'"
              :show="shows"
              :size="size"
              v-if="scope.row.showFlag == 2"
              type="success"
              @click="displaypacking(scope.$index, scope.row)"
            />
            <kt-button
              :label="'隐藏'"
              :show="audit"
              :size="size"
              v-if="scope.row.showFlag == 1"
              type="success"
              @click="Hiddenmethod(scope.$index, scope.row)"
            />
            <kt-button
              :label="'配置权益'"
              :size="size"
              :show="showConfiguration"
              type="text"
              @click="handleConfiguration(scope.$index, scope.row)"
            />
            <kt-button
              :label="'查看权益'"
              :size="size"
              :show="showLookConfiguration"
              type="text"
              @click="handleLookPower(scope.$index, scope.row)"
            />
            <kt-button
              :label="'查看'"
              :size="size"
              :show="viewDetails"
              type="text"
              @click="ViewDetailsConfiguration(scope.$index, scope.row)"
            />
            <kt-button
              :label="'启用'"
              :size="size"
              :show="showLookConfiguration"
              type="text"
              @click="EnableTheAgreement(scope.$index, scope.row)"
            />
            <kt-button
              :label="'停用'"
              :size="blockUp"
              :show="showLookConfiguration"
              type="text"
              @click="StopUsingAgreement(scope.$index, scope.row)"
            />
            <kt-button :label="'配置权益'" :size="size" :show="showConfiguration" type="text" @click="handleConfiguration(scope.$index, scope.row)" />
            <kt-button :label="'查看权益'" :size="size" :show="showLookConfiguration" type="text" @click="handleLookPower(scope.$index, scope.row)" />

            <kt-button
              :label="'加入黑名单'"
              :show="showIsBlacklistOperation"
              :size="size"
              v-if="scope.row.isBlacklist == 1"
              type="text"
              @click="handleIsBlacklist(scope.$index, scope.row)"
            />
            <kt-button
              :label="'加入白名单'"
              :show="showIsWhitelistOperation"
              :size="size"
              v-if="scope.row.isBlacklist == 0"
              type="text"
              @click="handleIsWhitelist(scope.$index, scope.row)"
            />
            <kt-button
              :label="'删除'"
              :show="showDeleteRuleParams"
              :size="size"
              type="text"
              @click="handleDeleteRule(scope.$index, scope.row)"
            />
          </template>
          <!-- :show="btn.isShowFommart(scope.row)" -->
          <kt-button v-for="(btn,index) in btnList" :key="index"
                     :label="btn.customLabel"
                     :show="btn.isShowMethod == true || scope.row.couponStatus == Number(btn.isShowMethod)"
                     :size="size"
                     type="active"
                     class="optionBtnClass"
                     @click="clickFun(btn.method,scope.$index, scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏-->
    <div class="toolbar" style="padding:10px;">
      <kt-button
        :label="$t('action.batchDelete')"
        :perms="permsDelete"
        :size="size"
        type="danger"
        @click="handleBatchDelete()"
        :disabled="this.selections.length===0"
        style="float:left;"
        v-if="showBatchDelete & showOperation"
      />

      <el-pagination
        layout="total, prev, pager, next, jumper,sizes"
        @current-change="refreshPageRequest"
        :current-page="pageRequest.pageNum"
        :page-size="pageRequest.pageSize"
        :total="totalSize"
        style="float:right;"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="handleSizeChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
  import KtButton from "@/views/Core/KtButton";
  import {exportExcel} from "@/utils/excel";
  import {formatDate} from "@/utils/datetime";

  export default {
    name: "JicTable",
    components: {
      KtButton
    },
    props: {
      columns: Array, // 表格列配置
      data: Object, // 表格分页数据
      permsEdit: String, // 编辑权限标识
      permsDelete: String, // 删除权限标识
      permsDetail: String, // 详情权限标识
      operationWidth: {
        type: Number,
        default: 185
      },
      size: {
        // 尺寸样式
        type: String,
        default: "mini"
      },
      align: {
        // 文本对齐方式
        type: String,
        default: "left"
      },
      maxHeight: {
        // 表格最大高度
        type: Number,
        default: 900
      },
      height: {
        // 表格最大高度
        type: Number,
        default: 500
      },
      showOperation: {
        // 是否显示操作组件
        type: Boolean,
        default: true
      },
      border: {
        // 是否显示边框
        type: Boolean,
        default: false
      },
      stripe: {
        // 是否显示斑马线
        type: Boolean,
        default: true
      },
      highlightCurrentRow: {
        // // 是否高亮当前行
        type: Boolean,
        default: true
      },
      showOverflowTooltip: {
        // 是否单行显示
        type: Boolean,
        default: true
      },
      showBatchDelete: {
        // 是否显示操作组件
        type: Boolean,
        default: true
      },
      showDeleteOperation: {
        // 是否显示操作组件
        type: Boolean,
        default: true
      },
      showDeleteParams: {
        // 是否显示操作组件
        type: Boolean,
        default: false
      },
      showEditOperation: {
        // 是否显示操作组件
        type: Boolean,
        default: true
      },
      showDetailOperation: {
        // 是否显示操作组件
        type: Boolean,
        default: false
      },
      showIndex: {
        // 是否显示操作组件
        type: Boolean,
        default: false
      },
      showSelection: {
        // 是否显示操作组件
        type: Boolean,
        default: true
      },
      customLabel: {
        // 是否显示操作组件
        type: String,
        default: ""
      },
      showCustomOperation: {
        // 是否显示操作组件
        type: Boolean,
        default: false
      },
      auditLabel: {
        // 是否显示操作组件
        type: String,
        default: ""
      },
      showAuditOperation: {
        // 是否显示操作组件
        type: Boolean,
        default: false
      },
      showMockOperation: {
        //mock操作按钮
        type: Boolean,
        default: false
      },
      loading:{
        type: Boolean,
        default: false
      },
      btnList:{
        type: Array
      },
      showCopyOperation: {
        //mock操作按钮
        type: Boolean,
        default: false
      },
      showConfiguration: {
        type: Boolean,
        default: false
      },
      blockUp: {
        type: Boolean,
        default: false
      },
      startUsing: {
        type: Boolean,
        default: false
      },
      viewDetails: {
        type: Boolean,
        default: false
      },
      showPushOperation: {
        //mock操作按钮
        type: Boolean,
        default: false
      },
      showPushOperations: {
        //mock操作按钮
        type: Boolean,
        default: false
      },
      groundings: {
        //mock操作按钮
        type: Boolean,
        default: false
      },
      conceal: {
        //mock操作按钮
        type: Boolean,
        default: false
      },
      audit: {
        //mock操作按钮
        type: Boolean,
        default: false
      },
      shows: {
        //mock操作按钮
        type: Boolean,
        default: false
      },
      showIsBlacklistOperation: {
        type: Boolean,
        default: false
      },
      showIsWhitelistOperation: {
        type: Boolean,
        default: false
      },
      showDeleteRuleParams: {
        type: Boolean,
        default: false
      },
      showLookConfiguration: {
        //mock操作按钮
        type: Boolean,
        default: false
      },
      showCopyLink:{
        type:Boolean,
        default:false
      },
        columns: Array, // 表格列配置
        data: Object, // 表格分页数据
        permsEdit: String, // 编辑权限标识
        permsDelete: String, // 删除权限标识
        permsDetail: String, // 详情权限标识
        operationWidth: {
            type: Number,
            default: 185
        },
        size: {
            // 尺寸样式
            type: String,
            default: "mini"
        },
        align: {
            // 文本对齐方式
            type: String,
            default: "left"
        },
        maxHeight: {
            // 表格最大高度
            type: Number,
            default: 900
        },
        height: {
            // 表格最大高度
            type: Number,
            default: 500
        },
        showOperation: {
            // 是否显示操作组件
            type: Boolean,
            default: true
        },
        border: {
            // 是否显示边框
            type: Boolean,
            default: false
        },
        stripe: {
            // 是否显示斑马线
            type: Boolean,
            default: true
        },
        highlightCurrentRow: {
            // // 是否高亮当前行
            type: Boolean,
            default: true
        },
        showOverflowTooltip: {
            // 是否单行显示
            type: Boolean,
            default: true
        },
        showBatchDelete: {
            // 是否显示操作组件
            type: Boolean,
            default: true
        },
        showDeleteOperation: {
            // 是否显示操作组件
            type: Boolean,
            default: true
        },
        showDeleteParams: {
            // 是否显示操作组件
            type: Boolean,
            default: false
        },
        showEditOperation: {
            // 是否显示操作组件
            type: Boolean,
            default: true
        },

        showDetailOperation: {
            // 是否显示操作组件
            type: Boolean,
            default: false
        },
        showIndex: {
            // 是否显示操作组件
            type: Boolean,
            default: false
        },
        showSelection: {
            // 是否显示操作组件
            type: Boolean,
            default: true
        },
        customLabel: {
            // 是否显示操作组件
            type: String,
            default: ""
        },
        showCustomOperation: {
            // 是否显示操作组件
            type: Boolean,
            default: false
        },
        auditLabel: {
            // 是否显示操作组件
            type: String,
            default: ""
        },
        showAuditOperation: {
            // 是否显示操作组件
            type: Boolean,
            default: false
        },
        showMockOperation: {
            //mock操作按钮
            type: Boolean,
            default: false
        },
        loading: {
            type: Boolean,
            default: false
        },
        btnList: {
            type: Array
        },
        showCopyOperation: {
            //mock操作按钮
            type: Boolean,
            default: false
        },
        showConfiguration: {
            type: Boolean,
            default: false
        },
        showIsBlacklistOperation: {
            type: Boolean,
            default: false
        },
        showIsWhitelistOperation: {
            type: Boolean,
            default: false
        },
        showDeleteRuleParams: {
            type: Boolean,
            default: false
        },
        showLookConfiguration: {
            //mock操作按钮
            type: Boolean,
            default: false
        },
    },
    data() {
      return {
        totalSize: 0,
        content: [],
        // 分页信息
        pageRequest: {
          pageNum: 1,
          pageSize: 10
        },
        // loading: false, // 加载标识
        selections: [],// 列表选中列
        mock_title: null,
      };
    },
    methods: {
      //静态页面请求
      findPageStaticState: function (filters) {
        var this_ = this;
        if (filters == undefined || filters == null) {
          filters = {};
        }
        filters.start = this.pageRequest.pageNum;
        filters.limit = this.pageRequest.pageSize;
        if (filters.res.rows == null) {
          filters.res.rows = [];
        }
        this_.content = filters.res.rows;
        this_.totalSize = Number(filters.res.total);
      },
      // 分页查询
      findPage: function (res) {
        // this.loading = true
        // debugger;
        this.content = res.content;
        this.totalSize = Number(res.total);
        // this.loading = false
        // this.$emit("findPage");
      },
// 下架分页查询
      updateListA: function (res) {
        // this.loading = true
        // debugger;
        this.content = res.content;
        this.totalSize = Number(res.total);
        // this.loading = false
        // this.$emit("findPage");
      },
// 上架分页查询
      updateListB: function (res) {
        // this.loading = true
        // debugger;
        this.content = res.content;
        this.totalSize = Number(res.total);
        // this.loading = false
        // this.$emit("findPage");
      },
      //根据日期来进行查询
      findPageByDate: function (filters) {
        //
        var this_ = this;
        if (filters == undefined || filters == null) {
          filters = {};
        }
        this.utils.request.queryUserList(filters, function (res) {
          if (res.data == null) {
            res.data = [];
          }
          this_.content = res.data;
          this_.totalSize = res.data.length;
        });
      },

      //excle导出
      exportData(filters, filterColumns, fileName) {
        if (filters == undefined || filters == null) {
          filters = {};
        }
        filters.start = null;
        filters.limit = null;
        this.utils.request.queryUserPage(filters, function (res) {
          if (fileName == undefined || fileName == null) {
            fileName = "excel-list";
          }

          fileName = fileName + "_" + formatDate(new Date(), "yyyyMMdd");

          exportExcel(res.rows, filterColumns, fileName);
        });
      },
      init: function () {
        // this.findPage();
        // debugger
        // this.loading = true
        this.$emit("findPage",{"start":this.pageRequest.pageNum,"limit":this.pageRequest.pageSize});
      },
      // 选择切换
      selectionChange: function (selections) {
        this.selections = selections;
        this.$emit("selectionChange", {selections: selections});
      },
      // 选择切换
      handleCurrentChange: function (val) {
        this.$emit("handleCurrentChange", {val: val});
      },
      // 换页刷新
      refreshPageRequest: function (pageNum) {
        this.pageRequest.pageNum = pageNum;
        this.init({"start":this.pageRequest.pageNum,"limit":this.pageRequest.pageSize});
      },
      // 换页刷新
      handleSizeChange: function (pageSize) {
        this.pageRequest.pageSize = pageSize;
        this.pageRequest.pageNum = 1;
        this.init({"start":this.pageRequest.pageNum,"limit":this.pageRequest.pageSize});
      },
      // 编辑
      handleEdit: function (index, row) {
        this.$emit("handleEdit", {index: index, row: row});
      },
      // 删除
      handleDelete: function (index, row) {
        this.delete(row.id);
      },
      // 删除
      handleDeleteParams: function (index, row) {
        this.deleteParams(row);
      },
      // 批量删除
      handleBatchDelete: function () {
        let ids = this.selections.map(item => item.id).toString();
        this.delete(ids);
      },
      handleDetail: function (index, row) {
        this.$emit("handleDetail", {index: index, row: row});
      },
      handleCustom: function (index, row) {
        this.$emit("handleCustom", {index: index, row: row});
      },
      clickFun:function(method,index,row){
        this.$emit(method, {index: index, row: row});
      },
      handleAudit: function (index, row) {
        this.$emit("handleAudit", {index: index, row: row});
      },
      // 删除操作
      delete: function (ids) {
        this.$confirm("确认删除选中记录吗？", "提示", {
          type: "warning"
        })
          .then(() => {
            let params = [];
            let idArray = (ids + "").split(",");
            for (var i = 0; i < idArray.length; i++) {
              params.push({id: idArray[i]});
            }
            //this.loading = true
            let callback = res => {
              if (res.code == "0000") {
                this.$message({message: "删除成功", type: "success"});
                this.init();
              } else {
                this.$message({message: "操作失败, " + res.msg, type: "error"});
              }
              this.loading = false;
            };
            this.$emit("handleDelete", {params: params, callback: callback});
          })
          .catch(() => {
          });
      },
      // 删除操作 多参数
      deleteParams: function (row) {
        this.$confirm("确认删除选中记录吗？", "提示", {
          type: "warning"
        })
          .then(() => {
            //this.loading = true
            let callback = res => {
              if (res.code == "0000") {
                this.$message({message: "删除成功", type: "success"});
                this.init();
              } else {
                this.$message({message: "操作失败, " + res.msg, type: "error"});
              }
              this.loading = false;
            };
            this.$emit("handleDeleteParams", {params: row, callback: callback});
          })
          .catch(() => {
          });
      },
      findPageMock: function (pageResultDetail) {
        var this_ = this;
        this_.content = pageResultDetail.rows;
        this_.totalSize = Number(pageResultDetail.total);
        this_.mock_title = pageResultDetail.mock_title;
      },
      clinkMock: function () {
        this.$alert(this.mock_title);
      },
      batchOperationMock: function (mock_title) {
        var this_ = this;
        this.$alert(this.selections.length);
        if (this.selections.length.toString()=="0") {
          this_.mock_title = "请选择至少一条记录";
          this.clinkMock();
        } else {
          this_.mock_title = mock_title;
          this.clinkMock();
        }
      },handleCopy: function (index, row) {
        this.$emit("handleCopy", {index: index, row: row});
      },
      handlePush: function (index, row) {
        this.$emit("handlePush", {index: index, row: row});
      },
      handleLower: function (index, row) {
        this.$emit("handleLower", {index: index, row: row});
      },
      grounding: function (index, row) {
        this.$emit("grounding", {index: index, row: row});
      },
      Hiddenmethod: function (index, row) {
        this.$emit("Hiddenmethod", {index: index, row: row});
      },
      displaypacking: function (index, row) {
        this.$emit("displaypacking", {index: index, row: row});
      },
      Auditmethods: function (index, row) {
        this.$emit("Auditmethods", {index: index, row: row});
      },
      handleIsWhitelist: function (index, row) {
        this.$emit("handleIsWhitelist", {index: index, row: row});
      },
      handleIsBlacklist: function (index, row) {
        this.$emit("handleIsBlacklist", {index: index, row: row});
      },
      handleDeleteRule: function (index, row) {
        this.$emit("handleDeleteRule", {index: index, row: row});
      },
      handleLookPower: function (index, row) {
        this.$emit("handleLookPower", {index: index, row: row});
      },
      ViewDetailsConfiguration: function (index, row) {
        this.$emit("ViewDetailsConfiguration", {index: index, row: row});
      },
      StopUsingAgreement: function (index, row) {
        this.$emit("StopUsingAgreement", {index: index, row: row});
      },
      EnableTheAgreement: function (index, row) {
        this.$emit("EnableTheAgreement", {index: index, row: row});
      },
      handleConfiguration: function (index, row) {
        this.$emit("handleConfiguration", {index: index, row: row});
      },
      onCopy(){
          this.$message({message: "复制成功！", type: "success"});
      },
      onError(){
          this.$message({message: "复制失败！", type: "error"});
      },
    },

    mounted() {
      this.refreshPageRequest(1);
    }
  };
</script>

<
<style scoped lang="scss">
  /deep/ .el-table .sort-caret.ascending {
    border-bottom-color: #FFF;
    top: 5px;
  }

  /deep/ .el-table .sort-caret.descending {
    border-top-color: #FFF;
    bottom: 7px;
  }

  /deep/ .el-table .ascending .sort-caret.ascending {
    border-bottom-color: #2F4554;
  }

  /deep/ .el-table .descending .sort-caret.descending {
    border-top-color: #2F4554;
  }
  .optionBtnClass{
    margin-top: 5px;
    margin-bottom: 5px;
  }
</style>
